<script setup lang="ts">
import { fullUrl } from '@/utils/common'
import { orderType, pageUrl, safeBottom } from '@/utils/constants'
import {
  getCartOrderPreApi,
  getOrderPreApi,
  getRepurchaseOrderPreByOrderIdApi,
  postOrderApi,
  getSurcharge,
} from '@/api/order'
import { useAddressStore } from '@/stores/modules/address'
import type { orderPreResult } from '@/types/order'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, reactive, ref, watch } from 'vue'
import shopCoupon from '@/components/shop-coupon/shop-coupon.vue'
import type { couponListItem } from '@/types/coupon'
import { debounce } from 'lodash'
import { useMemberStore } from '@/stores'

//获取地址store
const addressStore = useAddressStore()
addressStore.changeScene('order')

const profileData = useMemberStore().profile

// 订单备注
const buyerMessage = ref('')

const disabledSubmit = ref(false)

if (!addressStore.selectedAddress?.id) {
  disabledSubmit.value = true
}

//获取页面参数
const query = defineProps<{
  sku_id?: string
  count?: string
  orderId?: string
}>()

//获取下单前信息
const orderPreData = ref<orderPreResult>()
const getOrderPreData = async () => {
  const params = {
    id: query.orderId ?? '0',
    sku_id: query.sku_id ?? '0',
    num: query.count ?? '0',
    address_id: addressStore.selectedAddress?.id ?? '0',
    coupon_id: selectCouponId.value ?? '0',
  }

  let res: any = []

  try {
    if (query.sku_id && query.count) {
      //直接下单
      res = await getOrderPreApi({
        sku_id: params.sku_id,
        num: params.num,
        address_id: params.address_id,
        coupon_id: params.coupon_id,
      })
    } else if (query.orderId) {
      //再次购买下单
      res = await getRepurchaseOrderPreByOrderIdApi({
        id: params.id,
        address_id: params.address_id,
        coupon_id: params.coupon_id,
      })
    } else {
      //购物车下单
      res = await getCartOrderPreApi({
        address_id: params.address_id,
        coupon_id: params.coupon_id,
      })
    }

    disabledSubmit.value = false
  } catch (error: any) {
    uni.showModal({
      title: 'Tips',
      content: error.data.msg,
    })
  }

  orderPreData.value = res.result

  // 计算运费逻辑
  let totalExpedited = 0;
  let totalGeneral = 0;
  let totalInsurance = 0;
  let totalTariff = 0;
  orderPreData.value?.goods?.forEach((item: any) => {
    const price = Number(item.price);
    const num = Number(item.num);
    const expeditedRate = Number(freight.expedited_freight || 1);
    const generalRate = Number(freight.general_freight || 1);

    //加急
    item.expedited_price = price * num * expeditedRate;
    //标准
    item.general_price = price * num * generalRate;

    //加急
    item.insurance_price = price * num * Number(freight_insurance.freight_insurance || 1);
    //标准
    item.tariff_price = price * num * Number(tariff.tariff || 1);

    // 累加到总价
    totalExpedited += item.expedited_price;
    totalGeneral += item.general_price;
    totalInsurance += item.insurance_price;
    totalTariff += item.tariff_price;

  });

  // 更新freight对象的总价，保留两位小数 Math.floor(totalShippingInsuranceFee.value * 100) / 100
  freight.expedited_price = Math.floor(totalExpedited * 100) / 100;
  freight.general_price = Math.floor(totalGeneral * 100) / 100;
  freight_insurance.price = Math.floor(totalInsurance * 100) / 100;
  tariff.price = Math.floor(totalTariff * 100) / 100;

  // 根据选择的运费类型设置运费
  // let freightAmount = isFeightVal.value ?
  //     Number(freight.general_price || 0) :
  //     Number(freight.expedited_price || 0)

  // // 判断是否有运费
  // if(isFeightVal.value){
  //   freightAmount = totalPrice < 90 ? Number(freight.general_price) : 0;
  // }

  // 判断是否有运费
  let generalPrice = Number(orderPreData.value?.summary.total_price) < 90 ? freight.general_price : 0;

  // 计算最终价格
  orderPreData.value.summary.pay_price = Math.floor(
    (
      Number(orderPreData.value?.summary.total_price || 0) +
      Number(generalPrice || 0) -
      Number(couponText.value || 0)
    ) * 100
  ) / 100

  // 确保保险和关税金额初始化为0
  otherPrice.insurance = 0;
  otherPrice.tariff = 0;

  if (res.result.error) {
    uni.showModal({
      title: 'Tips',
      content: res.result.error,
    })
    disabledSubmit.value = true
  }
}

let freight = reactive({
  general_price: 0,
  expedited_price: 1,
}) //标准运费和加急运费
let freight_insurance = reactive({
  price: 1,
}) //运费保险
let tariff = reactive({
  price: 1,
})  //关税运费
//获取运费规则
const getSurchargeOrder = async () => {
  const res = await getSurcharge()
  console.log(res)
  Object.assign(freight, {
    ...res.data.freight,
  })
  Object.assign(freight_insurance, {
    ...res.data.freight_insurance,
  })
  Object.assign(tariff, {
    ...res.data.tariff,
  })
}
let isFeightVal = ref(true);
const onChangeFreight = (e: any) => {
  isFeightVal.value = e.detail.value === 'standard'
  // 更新运费和总价
  if (orderPreData.value) {
    const totalPrice = Number(orderPreData.value.summary.total_price || 0)
    const couponAmount = Number(couponText.value || 0)

    // 根据选择的运费类型设置运费
    let freightAmount = isFeightVal.value ?
      Number(freight.general_price || 0) :
      Number(freight.expedited_price || 0)

    // 判断是否有运费
    if(isFeightVal.value){
      freightAmount = totalPrice < 90 ? Number(freight.general_price) : 0;
    }

    // 更新运费
    orderPreData.value.summary.freight = freightAmount

    // 更新应付金额 = 商品总价 + 运费 - 优惠券金额
    orderPreData.value.summary.pay_price = Math.floor((totalPrice + freightAmount - couponAmount) * 100) / 100
  }
}
let otherPrice = reactive({
  insurance: 0,
  tariff: 0
});
const onChangeInsurance = (e: any, type: number) => {
  console.log(e.detail.value)

  if (orderPreData.value) {
    const totalPrice = Number(orderPreData.value.summary.total_price || 0)
    const couponAmount = Number(couponText.value || 0)

    // 根据选择的运费类型设置运费
    let freightAmount = isFeightVal.value ?
      Number(freight.general_price || 0) :
      Number(freight.expedited_price || 0)

    // 判断是否有运费
    if(isFeightVal.value){
      freightAmount = totalPrice < 90 ? Number(freight.general_price) : 0;
    }

    // 更新运费
    orderPreData.value.summary.freight = freightAmount

    // 计算基础价格（商品 + 运费 - 优惠券）
    let basePrice = totalPrice + freightAmount - couponAmount;

    if (type === 1) { // 保险选项
      // 如果选中了保险
      if (e.detail.value.length > 0) {
        // 记录保险金额
        otherPrice.insurance = Number(freight_insurance.price || 0);
      } else {
        // 取消保险，重置保险金额
        otherPrice.insurance = 0;
      }
    } else if (type === 2) { // 关税选项
      // 如果选中了关税
      if (e.detail.value.length > 0) {
        // 记录关税金额
        otherPrice.tariff = Number(tariff.price || 0);
      } else {
        // 取消关税，重置关税金额
        otherPrice.tariff = 0;
      }
    }

    // 计算最终价格 = 基础价格 + 保险 + 关税
    orderPreData.value.summary.pay_price = Math.floor(
      (basePrice + otherPrice.insurance + otherPrice.tariff) * 100
    ) / 100;
  }
}

//下单页收货地址
const addressData = computed(() => {
  return addressStore.selectedAddress
})

// 提交订单
const onOrderSubmit = async () => {
  await checkOrder()
}
// 订单提交前校验
const checkOrder = () => {
  if (!addressStore.selectedAddress?.id) {
    return uni.showToast({
      title: 'Select the delivery address',
      icon: 'none',
      mask: true,
    })
  }
  debouncedSubmitOrder()
}
// 提交订单函数
const debouncedSubmitOrder = debounce(async () => {
  const res = await postOrderApi({
    address_id: addressStore.selectedAddress!.id,
    remark: buyerMessage.value,
    goods: orderPreData.value!.goods.map((item) => ({
      sku_id: item.id,
      num: item.num,
    })),
    type: orderType.default,
    coupon_id: selectCouponId.value,
    freight_template_id: isFeightVal.value ? 2 : 1,//物流模板id 1加急 2不加急
    freight_insurance_id: otherPrice.insurance === 0 ? 0 : 1,//运费保险 0不需要 1需要
    tariff_id: otherPrice.tariff === 0 ? 0 : 1,//关税 θ不需要 1需要
    coupon_id: selectCouponId.value
  })

  if (!res.result.id) {
    return uni.showToast({
      icon: 'error',
      title: 'Submission failed',
    })
  }
  // 跳转详情
  uni.redirectTo({ url: `${pageUrl['order-detail']}?id=${res.result.id}` })
}, 1000)

const couponPopup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const openCouponPopup = () => {
  couponPopup.value?.open()
}
const closeCouponPopup = () => {
  couponPopup.value?.close()
}
const selectCouponId = ref<string | number>('')
const couponText = ref('')
// 选择优惠券
const onSelectCoupon = (item: couponListItem) => {
  selectCouponId.value = item.id
  couponText.value = Number(item.discount_amount)
  let payPrice = Number(orderPreData.value.summary.pay_price)
  // 更新应付金额 = 商品总价 + 运费 - 优惠券金额
  if (orderPreData.value) {
    const couponAmount = Number(item.discount_amount)
    orderPreData.value.summary.pay_price = Math.floor((payPrice - couponAmount) * 100) / 100
  }
  closeCouponPopup()
}
// 清空已选择的优惠券
const clearSelectCoupon = () => {
  selectCouponId.value = ''
  orderPreData.value.summary.pay_price = Math.floor((Number(orderPreData.value.summary.pay_price) + Number(couponText.value)) * 100) / 100;
  couponText.value = 0;
  couponPopup.value?.close()
  // getOrderPreData().then(() => {
  //   couponPopup.value?.close()
  // })
}


onShow(async () => {
  await getSurchargeOrder();
  await getOrderPreData().then(() => {
    if (!orderPreData.value?.user_address) {
      addressStore.clearSelectedAddress()
    }
  })
})

let isPayVal = ref(true);

</script>

<template>
  <view v-if="orderPreData" class="page">
    <scroll-view scroll-y class="viewport">
      <!-- 收货地址 -->
      <navigator v-if="addressData" class="shipment" hover-class="none" :url="`${pageUrl['address']}?from=order`">
        <view class="user"> {{ addressData.name }} {{ addressData.phone }} </view>
        <view class="address"> {{ addressData.full_location }}</view>
        <text class="icon icon-right"></text>
      </navigator>
      <navigator v-else class="shipment" hover-class="none" :url="`${pageUrl['address']}?from=order`">
        <view class="address"> Select delivery address </view>
        <text class="icon icon-right"></text>
      </navigator>

      <!-- 商品信息 -->
      <view class="goods" v-if="orderPreData">
        <navigator v-for="item in orderPreData?.goods" :key="item.sku_id"
          :url="`${pageUrl['goods-detail']}?id=${item.goods_id}`" class="item" hover-class="none">
          <view>
            <image class="picture" :src="fullUrl(item.image)" />
          </view>
          <view class="meta">
            <view class="name ellipsis"> {{ item.goods.name }} </view>
            <view class="meta-spec" v-if="item.spec_text">
              <view class="color">
                <text>Color：</text>
                <image class="color" :src="fullUrl(item.spec_text.split('，')[0])" alt="" />
              </view>
              <view class="size">
                <text>Size：</text>{{ item.spec_text.split('，')[1] }}
              </view>
            </view>
            <!-- <view class="attrs">{{ item.spec_text.split('，')[1] }}</view> -->
            <view class="prices">
              <view class="pay-price symbol">{{ item.price }}</view>
              <view class="price symbol">{{ item.origin_price }}</view>
            </view>
            <view class="count">x{{ item.num }}</view>
          </view>
        </navigator>
      </view>

      <view class="related">
        <view class="item">
          <text class="text">Remarks</text>
          <input class="input" :cursor-spacing="30" placeholder="Leave message communicate with merchant"
            v-model="buyerMessage" />
        </view>
      </view>

      <!-- 支付金额 -->
      <view class="settlement">
        <view class="item">
          <text class="text">Total price: </text>
          <text class="number symbol">{{ orderPreData?.summary.total_price }}</text>
        </view>
        <view class="item">
          <text class="text">Coupon: </text>
          <text class="coupon" @tap="openCouponPopup" v-if="orderPreData.coupon_list.length > 0">
            <text v-if="selectCouponId" class="danger">-${{ couponText }}</text>
            <text v-else>
              <text class="danger">{{ orderPreData.coupon_list.length }}</text> a coupon is available
            </text>
          </text>
          <text v-else>No coupons</text>
        </view>
        <view class="item">
          <text class="text">Freight charges: </text>
          <text class="number symbol">{{ orderPreData?.summary.freight }}</text>
        </view>
      </view>

      <!-- 运费规则 -->
      <view class="shipping-rules">
        <view class="title">Shipping Options</view>
        <radio-group @change="onChangeFreight">
          <view class="rule-item">
            <radio value="standard" :checked="isFeightVal" color="#000000" />
            <view class="rule-content">
              <view class="rule-title">
                <text>{{ freight.general_freight_title }}</text>
                <view class="price" :style="{
                  color: Number(orderPreData?.summary.total_price) < 90 ? '#000000' : '#999999',
                  'text-decoration':  Number(orderPreData?.summary.total_price) < 90 ? 'none' : 'line-through'}">
                  <text class="unit-1">$</text>
                  <text>{{ freight.general_price }}</text>
                </view>
                <text class="free" v-if=" Number(orderPreData?.summary.total_price) >= 90">FREE SHIPPING</text>
              </view>
            </view>
          </view>
          <view class="desc-tip">{{ freight.general_freight_description }}</view>
          <view class="rule-item">
            <radio value="expedited" :checked="!isFeightVal" color="#000000" />
            <view class="rule-content">
              <view class="rule-title">
                <text>{{ freight.expedited_freight_title }}</text>
                <view class="price">
                  <text class="unit">$</text>
                  <text>{{ freight.expedited_price}}</text>
                </view>
              </view>
              
            </view>
          </view>
          <text class="desc-tip">{{ freight.expedited_freight_description }}</text>
        </radio-group>

        <view class="insurance-options">
          <view class="insurance-item">
            <checkbox-group @change="onChangeInsurance($event, 1)">
              <label>
                <checkbox value="freight_insurance" color="#000000" />
                <view>
                  <text class="text-tariff">{{ freight_insurance.freight_insurance_title }} </text>
                  <text class="unit-2">$</text>
                  <text>{{ freight_insurance.price }}</text>
                </view>
              </label>
            </checkbox-group>
            <view class="desc">{{ freight_insurance.freight_insurance_description }}</view>
          </view>

          <view class="insurance-item">
            <checkbox-group @change="onChangeInsurance($event, 2)">
              <label>
                <checkbox value="tariff" color="#000000" />
                <view>
                  <text class="text-tariff">{{ tariff.tariff_title }} </text>
                  <text class="unit-2">$</text>
                  <text>{{ tariff.price }}</text>
                </view>
              </label>
            </checkbox-group>
            <view class="desc">{{ tariff.tariff_description }}</view>
          </view>
        </view>
        
      </view>

      <!-- 支付 -->
      <view class="rule-item shipping-rules">
        <view class="rule-content">
          <view class="rule-title">
            <radio value="standard" :checked="isPayVal" color="#000000" />
            <text>Credit/Debit Card</text>
          </view>
          <view class="desc">
            <image
              src="/static/icons/payment_xyk-CLFe9UE9.svg"
              mode="scaleToFill"
              style="width: 100rpx; height: 50rpx;"
            />
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 优惠券弹出层 -->
    <uni-popup ref="couponPopup" type="share" background-color="#fff" class="coupon-popup">
      <view class="coupon-panel">
        <text class="close icon-close" @tap="closeCouponPopup"></text>
        <view class="title">Select coupon</view>
        <view class="content">
          <shop-coupon :couponList="orderPreData.coupon_list" mode="user" buttonTitle="Select to use"
            @buttonClicked="onSelectCoupon" class="user-coupon-popup" />
        </view>
      </view>
      <view class="coupon-panel-footer">
        <view class="button primary" @tap="clearSelectCoupon"> Do not use the coupon</view>
      </view>
    </uni-popup>

    <!-- 底部占位空盒子 -->
    <view class="toolbar-height"></view>

    <!-- 吸底工具栏 -->
    <view class="toolbar" :style="safeBottom">
      <view class="total-pay symbol">
        <text class="number">{{ (orderPreData?.summary.pay_price) }}</text>
      </view>
      <view class="button" :class="{ disabled: disabledSubmit }" @tap="onOrderSubmit" :style="safeBottom">
        <view class="button" :disabled="disabledSubmit">Submit</view>
      </view>
      <!-- <button
        class="button"
        @tap="onOrderSubmit"
        :style="safeBottom"
        :class="{ disabled: disabledSubmit }"
        :disabled="disabledSubmit"
      >
        提交订单
      </button> -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
}

.rule-item {
    // display: flex;
    // align-items: center;
    padding: 10rpx 30rpx 30rpx 30rpx;
    .confirm-btn{
      width: 100%;
      text-align: right;
      margin-bottom: 30rpx;
      font-size: 26rpx;
      font-weight: bold;
    }

    .rule-content {
      display: flex;
      justify-content: space-between;
      flex: 1;
      align-items: center;
      // margin-left: 20rpx;
    }

    .rule-title {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin-bottom: 10rpx;
      radio{
        margin-right: 8rpx;
      }
    }

    .desc {
      font-size: 26rpx;
      color: #999;
      image{
        position: relative;
        right: -14rpx;
      }
    }
  }

.symbol::before {
  content: '$';
  font-size: 80%;
  margin-right: 5rpx;
  position: relative;
  top: -2rpx;
}

.shipment {
  margin: 20rpx;
  padding: 30rpx 30rpx 30rpx 84rpx;
  font-size: 26rpx;
  border-radius: 10rpx;
  background: url('~@/static/images/locate.png') 20rpx center / 50rpx no-repeat #fff;
  position: relative;

  .icon {
    font-size: 36rpx;
    color: #333;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20rpx;
  }

  .user {
    color: #333;
    margin-bottom: 5rpx;
  }

  .address {
    color: #666;
    width: 94%;
  }
}

.goods {
  margin: 20rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .item {
    display: flex;
    padding: 30rpx 0;
    border-top: 1rpx solid #eee;

    &:first-child {
      border-top: none;
    }

    .picture {
      width: 170rpx;
      height: 170rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
    }

    .name {
      font-size: 26rpx;
      color: #444;
    }

    .meta-spec {
      background: transparent;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #888;

      span {
        font-size: 24rpx;
      }

      .color {
        margin-right: 20rpx;

        image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          border: 1px solid #e3e3e3;
        }
      }
    }

    .attrs {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 6rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
      max-width: 90%;
    }

    .prices {
      display: flex;
      align-items: baseline;
      margin-top: 6rpx;
      font-size: 28rpx;

      .pay-price {
        margin-right: 10rpx;
        color: #cf4444;
      }

      .price {
        font-size: 20rpx;
        color: #999;
        text-decoration: line-through;
      }
    }

    .count {
      position: absolute;
      bottom: 50;
      right: 0;
      font-size: 26rpx;
      color: #444;
    }
  }
}

.related {
  margin: 20rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80rpx;
    font-size: 26rpx;
    color: #333;
  }

  .input {
    flex: 1;
    text-align: left;
    margin: 20rpx 0;
    padding-right: 20rpx;
    font-size: 26rpx;
    color: #999;
  }

  .item .text {
    width: 125rpx;
  }

  .picker {
    color: #666;
  }

  .picker::after {
    content: '\e6c2';
  }
}

/* 结算清单 */
.settlement {
  margin: 20rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  // padding-bottom: 200rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    font-size: 26rpx;
    color: #333;
  }

  .coupon {
    &::after {
      font-family: 'iconfont' !important;
      content: '\e6c2';
    }
  }

  .danger {
    color: #cf4444;
  }
}

.coupon-panel {
  .title {
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
  }

  .close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    font-size: 40rpx;
  }

  .content {
    min-height: 400rpx;
    max-height: 650rpx;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.coupon-panel-footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0 40rpx;
  font-size: 28rpx;
  color: #444;

  .button {
    flex: 1;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    margin: 0 20rpx;
    color: #fff;
    border-radius: 72rpx;
  }

  .primary {
    color: #fff;
    background-color: #ff5f3c;
  }

  .secondary {
    background-color: #ffa868;
  }
}

/* 吸底工具栏 */
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 1;

  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;

  .total-pay {
    font-size: 40rpx;
    color: #cf4444;

    .decimal {
      font-size: 75%;
    }
  }

  .button {
    width: 220rpx;
    text-align: center;
    line-height: 68rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 68rpx;
    background-color: #ff5f3c;
    border: none;
  }

  .disabled {
    opacity: 0.6;
  }
}

// 底部占位空盒子
.toolbar-height {
  height: 190rpx;
}

/* 运费规则样式 */
.shipping-rules {
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .price {
    display: flex;
    margin-top: 6rpx;
    font-size: 24rpx;
  }

  .unit-1{
    font-size: 80%;
    position: relative;
    bottom: -2rpx;
  }

  .unit {
    font-size: 80%;
    position: relative;
    bottom: -4rpx;
  }

  .unit-2 {
    font-size: 80%;
    position: relative;
    top: -2rpx;
    margin-right: 2rpx;
  }

  .title {
    font-size: 24rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
  }

  .rule-item {
    display: flex;
    align-items: flex-start;
    padding: 20rpx 0;

    .rule-content {
      flex: 1;
      // margin-left: 20rpx;
    }

    .rule-title {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin-bottom: 10rpx;

      .price {
        margin: 0 20rpx;
        // text-decoration: line-through;
        color: #000;
      }

      .free {
        color: #ff5f3c;
      }
    }

    
  }
  .desc-tip {
    font-size: 26rpx;
    color: #999;
    padding-left: 80rpx;
    position: relative;
    top: -30rpx;
  }
  .insurance-options {
    margin-top: 30rpx;
    border-top: 2rpx solid #f5f5f5;
    padding-top: 20rpx;

    .insurance-item {
      margin-bottom: 20rpx;

      .text-tariff{
        margin-right: 10rpx;
      }

      label {
        display: flex;
        align-items: center;
        font-size: 24rpx;
      }

      .desc {
        margin-left: 60rpx;
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
  }
}

:deep(.uni-checkbox-input) {
  width: 38rpx;
  height: 38rpx;
}

:deep(.uni-button:after) {
  border: none !important;
}
</style>
